<template>
	<view class="container">
		<view class="daren-video-swiper">
			<view class="daren-video-swiper__item" v-for="(item, index) in videoList" :key="index">
				<view v-if="item.MediaUrl">
					<video class="daren-video" :src="item.MediaUrl">
						<view class="daren-bottom" v-if="item.IsLike" @click.stop="cancel_like(item)">
							<view class="daren-bottom-icon"><image src="../../../static/images/praise-heart.png"></image></view>
							<view>{{ item.LikeCount }}</view>
						</view>
						<view class="daren-bottom" v-else @click.stop="to_like(item)">
							<view class="daren-bottom-icon"><image src="../../../static/images/praise-heart-black.png"></image></view>
							<view>{{ item.LikeCount }}</view>
						</view>
					</video>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { isLogin, toLogin, successToShow, errorToShow, debounce } from '../../../config/common.js';
import { getServePlayerVideoInfoList, updateServePlayerLikeCount, cancelServePlayerLikeCount } from '../../../constant/customer.js';
export default {
	components: {},
	data() {
		return {
			videoList: [],
			query_filter: {
				servePlayerId: '',
				customerId: uni.getStorageSync('customerId'),
				pageIndex: 0,
				pageSize: 10
			},
			servePlayerId: '',
			customerId: uni.getStorageSync('customerId')
		};
	},
	onLoad: function(option) {
		if (isLogin()) {
			if (option.servePlayerId) {
				this.servePlayerId = option.servePlayerId;
				this.query_filter.servePlayerId = option.servePlayerId;
				if (this.servePlayerId) {
					this.getVideoList(this.query_filter);
				}
			}
		} else {
			toLogin();
		}
	},
	onReachBottom() {
		this.query_filter.pageIndex++;
		this.getVideoList(this.query_filter);
	},
	onPullDownRefresh() {
		this.query_filter.pageIndex = 0;
		this.getVideoList(this.query_filter);
	},
	methods: {
		async getVideoList() {
			//评论列表
			let res = await getServePlayerVideoInfoList(this.query_filter);
			if (res.TotalNumber > this.query_filter.pageIndex * this.query_filter.pageSize) {
				uni.stopPullDownRefresh();
				if (this.query_filter.pageIndex > 0) {
					for (let i = 0; i < res.Source.length; i++) {
						let obj = res.Source[i];
						this.videoList.push(obj);
					}
				} else {
					this.videoList = res.Source;
				}
			} else {
				return;
			}
		},
		to_like(select_item) {
			//点赞
			debounce(() => {
				this.imp_tolike(select_item);
			}, 500)();
		},
		async imp_tolike(select_item) {
			//点赞
			if (this.servePlayerId && this.customerId) {
				await updateServePlayerLikeCount({
					servePlayerId: this.servePlayerId,
					mediaId: select_item.Id,
					customerId: this.customerId
				});
				successToShow('已点赞', res => {
					select_item.IsLike = true;
					select_item.LikeCount++;
				});
			}
		},
		cancel_like(select_item) {
			//取消点赞
			debounce(() => {
				this.imp_cancellike(select_item);
			}, 500)();
		},
		async imp_cancellike(select_item) {
			//取消点赞
			if (this.servePlayerId && this.customerId) {
				await cancelServePlayerLikeCount({
					servePlayerId: this.servePlayerId,
					mediaId: select_item.Id,
					customerId: this.customerId
				});
				successToShow('已取消', res => {
					select_item.IsLike = false;
					if (select_item.LikeCount > 1) {
						select_item.LikeCount--;
					} else {
						select_item.LikeCount = 0;
					}
				});
			}
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	display: flex;
	flex-wrap: wrap;
}

.daren-video-swiper {
	width: 100%;
	padding: 20rpx 30rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	&__item {
		width: 32%;
		margin-bottom: 20rpx;
		.daren-video {
			width: 100%;
			height: 280rpx;
			border-radius: 16rpx;
			.daren-bottom {
				font-size: $main-text-size-28;
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				color: #ffffff;
				display: flex;
				align-items: baseline;
				font-family: 'SourceHanSansCN-Regular';
				width: 121rpx;
				height: 60rpx;
				align-items: center;
				justify-content: flex-end;
				&-icon {
					width: 36rpx;
					height: 36rpx;
					margin-right: 4rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
}

.daren-video-swiper::after {
	content: '';
	width: 32%;
}
</style>
